<script lang="ts" setup>
import loadingTitleList from './Loading/LoadingTitle'
function getLoadingList() {
  const modules = import.meta.glob('./Loading/*.vue', { eager: true })
  const entries = Object.entries(modules).map(([key, value]: any) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
    return [matched, value.default];
  })
  // Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。
  const fromEntries = Object.fromEntries(entries)
  return fromEntries
}
const loadingList = getLoadingList()

</script>
<template>
  <template v-for="(LoadingComp, name, i) in loadingList" :key="name">
    <h1>{{i + 1}}. {{ loadingTitleList[i] || 'Loading' }}</h1>
    <component :is="LoadingComp" />
  </template>
</template>
<style lang="scss">
/* loading- 全局样式 */
@keyframes animateBg {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
</style>